<template>
    <div>
        <!-- 搜索框 -->
        <el-row :gutter="30">
            <el-col :span="5">
                <el-input placeholder="请输入商品名" v-model="searchItem.a" size="small">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <el-col :span="5">
                <el-input placeholder="请输入仓库名" v-model="searchItem.b" size="small">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-col>
            <!-- 搜索按钮 -->
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" size="small" @click="searchMessage()">搜索</el-button>
            </el-col>
            <!-- 重置搜索条件按钮 -->
            <el-col :span="2">
                <el-button type="warning" icon="el-icon-refresh-right" size="small"
                    @click="resetSearch()">重置</el-button>
            </el-col>
        </el-row>
      
        <!-- 仓库库存信息表格 -->
        <el-table ref="singleTable" :data="messages.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%" highlight-current-row @row-click="dataChange" height="450px">
            <el-table-column prop="id" label="id" width="120px" fixed sortable>
            </el-table-column>
            <el-table-column prop="productName" label="商品名" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="name" label="仓库名" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="num" label="仓库库存" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="creator" label="创建者" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="mender" label="修改者" width="140px" sortable>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="220px" sortable>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="220px" sortable>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[6, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="messages.length">
        </el-pagination>
    </div>
</template>

<script>
    import Cookie from 'js-cookie'
    import { SelectAllStock } from '@/api/stock.js'
    export default {
        inject: ['reload'],
        data() {
            return {
                searchItem: {               // 查询条件
                    "a": "",
                    "b": "",
                },
                tempData: [],               // 查询结果
                mCopy: [],           // 复制所有仓库库存信息（目的：减少接口调用）
                messages: [],               // 所有仓库库存信息
                currentPage: 1,         // 当前页码
                total: 20,              // 总条数
                pageSize: 6             // 每页的数据条数

            }
        },
        methods: {
            // 搜索
            searchMessage() {
                // 搜索信息为空，展示所有信息
                if (this.searchItem.a === ''&&this.searchItem.b === '') {
                    this.messages = this.mCopy
                } else {
                    // 重置搜索条件
                    this.tempData = []
                    this.messages = this.mCopy
                    // 根据条件模糊查询
                    for (const item of this.messages) {
                        if ( (this.searchItem.a === '' || item.productName.includes(this.searchItem.a)) &&
                            (this.searchItem.b === '' || item.name.includes(this.searchItem.b))) {
                            // 符合条件，加入查询结果中
                            this.tempData.push(item)
                        }
                    }
                    // 展示查询结果
                    this.messages = this.tempData
                }
            },
            // 重置查询条件
            resetSearch() {
                this.searchItem = {
                    "a": "",
                    "b": "",
                    "c": "",
                },
                    this.messages = this.mCopy
            },
            // 查询所有仓库库存
            getmessages() {
                SelectAllStock().then((res) => {
                    this.messages = res.data.data
                    this.mCopy = res.data.data
                })
            },
          
            // 选中一行数据，高亮显示
            dataChange(val) {
                this.isdisabled = false
                this.mesg = val;
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.isdisabled = true
                this.currentPage = val;
            },
        },
        // 加载用户信息
        mounted() {
            this.getmessages()
        }

    }
</script>
<style scoped>
    .el-col-24 {
        margin-top: 13px;
        margin-bottom: 13px;
    }
</style>